<template>
	<view class="content">
		<view class="form-box">

			<view class="input-box">
				<view class="i-l">收货人</view>
				<input type="text" placeholder="收货人姓名" :value="areaList.name" @input="nameInput"></input>
			</view>
			<view class="input-box">
				<view class="i-l">手机号码</view>
				<input type="number" placeholder="收货人手机号" :value="areaList.phone" @input="phoneInput"></input>
			</view>
			<view class="input-box">
				<view class="i-l">收货地区</view>


				<view :class="['i-r',areaList.areaName == ''?'c-c':'']" @click="changePop">
					{{areaList.areaName==''?'选择省/市/区':areaList.areaName}}
				</view>

			</view>
			<view class="input-box">
				<view class="i-l">详细地址</view>
				<input type="text" placeholder="请详细到街道、门牌号等" :value="areaList.address"
					@input="addressInput"></input>
			</view>

		</view>
		<view class="form-box">
			<view class="input-box">
				<view class="i-l">是否默认</view>
				<switch color="#b81c22" style="transform:scale(0.8)" :checked="areaList.isDefault" @change="bindIsDefaultChange" />
			</view>
		</view>

		<view class="red-btn" @click="save">保存并使用</view>

		<view class="prick" v-if="visible">

			<view class="picker-btn">
				<view class="cancel" @click="cancel">
					取消
				</view>
				<view class="define" @click="define">
					确定
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in city" :key="index">{{item.name}}</view>
				</picker-view-column>

				<picker-view-column>
					<view class="item" v-for="(item,index) in area" :key="index">{{item.name}}</view>
				</picker-view-column>

			</picker-view>

		</view>
	</view>
</template>

<script>
	import {
		getArea,addReceiver
	} from '@/api/common.js';
	export default {
		data() {
			return {
				visible: false,
				areaList: {
					address: "",
					areaName: "",
					isDefault: false,
					name: "",
					phone: "",
					status:0,
					receiverId:'',
					areaId:''
				},
				// status: 0,
				siteList: [],
				province:[],
				provinceId:[],
				city:[],
				cityId:[],
				area:[],
				areaId:[],
				value: [0, 0, 0],
				indicatorStyle: `height: 50px;`
			};
		},
		onLoad(option) {
			console.log(option)
			this.getarea();
			if(option.item==undefined){
				return
			}else{
				var item = JSON.parse(decodeURIComponent(option.item))
				console.log(item)
				this.areaList = item
				this.areaList.receiverId = item.id
				this.areaList.name = item.name
				this.areaList.phone = item.phone
				this.areaList.areaName = item.areaName
				this.areaList.address = item.address
				this.areaList.isDefault = item.isDefault
				this.areaList.areaId = item.areaId
				this.areaList.status = option.status
			}

		},


		methods: {
			getarea() {
				getArea({parentId:1}).then(res => {
					console.log(res)
					this.province = res.data.list
				})
				getArea({parentId:240}).then(res => {
					console.log(res)
					this.city = res.data.list
				})
				getArea({parentId:3014}).then(res => {
					console.log(res)
					this.area = res.data.list
				})
			},

			bindChange(e) {
				console.log(e)
				const val = e.detail.value;
				if (this.value[0] !== val[0]) {
					this.value = val;
					const index = this.value[0]
					this.provinceId = this.province[index].id
					getArea({parentId:this.provinceId}).then(res => {
						this.city = res.data.list
					})
					const index2 = this.value[1]
					this.cityId = this.city[index2].id
					getArea({parentId:this.cityId}).then(res => {
						this.area = res.data.list
					})
				}
				if (this.value[1] !== val[1]) {
					this.value = val;
					const index2 = this.value[1]
					this.cityId = this.city[index2].id
					getArea({parentId:this.cityId}).then(res => {
						this.area = res.data.list
					})
				}
				if (this.value[2] !== val[2]) {
					this.value = val
				}
			},
			changePop() {
				this.visible = !this.visible
			},
			define() {
				this.visible = false
				var val = this.value
				if(this.area.length != 0){
					this.areaList.areaName = this.province[val[0]].name + this.city[val[1]].name + this.area[val[2]].name
						
					this.areaList.areaId = this.area[val[2]].id
				}else{
					this.areaList.areaName = this.province[val[0]].name + this.city[val[1]].name
					this.areaList.areaId = this.city[val[1]].id
				}
				
			},
			cancel(){
				this.visible = false
			},
			// 姓名
			nameInput(e){
				this.areaList.name = e.target.value
			},
			// 电话
			phoneInput(e){
				this.areaList.phone = e.target.value
			},
			
			// 详细地址
			addressInput(e){
				this.areaList.address = e.target.value
			},
			
			// 是否默认
			bindIsDefaultChange(e){
				this.areaList.isDefault = e.detail.value
			},
	
			// 保存
			save(){
				addReceiver(this.areaList).then(res => {
					console.log(res)
					if(res.message=="操作成功"){
						// uni.navigateTo({
						// 	url:'./site'
						// })
						uni.navigateBack()
					}
				})
			},
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.prick {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.picker-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		border-bottom: 1px solid #f5f5f5;
		padding: 30rpx;
		background-color: #ffffff;
		bottom: 500rpx;
		position: absolute;
	}

	.picker-view {
		width: 100%;
		height: 500rpx;
		// margin-top: 20rpx;
		position: absolute;
		bottom: 0;
		background-color: #ffffff;

	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.red-btn {
		margin: auto;
		margin-top: 70rpx;
		width: 92%;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		background: #b81c22;
		color: #ffffff;
		font-size: 24rpx;
	}

	.form-box {
		width: 100%;
		padding: 0 30rpx;
		background-color: #ffffff;
		margin-top: 30rpx;
	}

	.form-box .input-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.form-box .area-box {
		display: flex;
		align-items: flex-start;
		font-size: 28rpx;
		padding-top: 30rpx;
	}

	.form-box .input-box .i-l,
	.form-box .area-box .i-l {
		width: 30%;
		font-size: 28rpx;
	}

	.form-box .input-box input,
	.form-box .area-box textarea {
		flex: 1;
	}

	.form-box .input-box .i-r {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
	}
	.form-box .input-box .i-r.c-c{
		color: grey;
	}
</style>
